<!DOCTYPE html>
<html lang="zh-CN" >
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        color: whitesmoke;
    }
    .pstyle p {
        border: 1px solid firebrick;
    }
</style>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-9 col-md-push-3" style="background-color: salmon">.col-md-9 .col-md-push-3</div>
        <div class="col-md-3 col-md-pull-9" style="background-color: darkgreen">.col-md-3 .col-md-pull-9</div>
    </div>

    <div class="row">
        <div class="col-md-3 col-sm-6" style="background-color: #693ac5">col-md-3 col-sm-6 </div>
        <div class="col-md-3 col-sm-6" style="background-color: crimson">col-md-3 col-sm-6 </div>
        <div class="col-md-3 col-sm-6" style="background-color: springgreen" >col-md-3 col-sm-6 </div>
        <div class="col-md-3 col-sm-6" style="background-color: #761c19">col-md-3 col-sm-6 </div>
    </div>



    <div class="row">
        <div class="col-md-3 col-sm-3  " style="background-color: #693ac5">col-md-3 col-sm-3  </div>
        <div class="col-md-3 col-sm-3 col-sm-offset-8" style="background-color: crimson">col-md-3 col-sm-3 col-sm-offset-4 </div>
        <div class="col-md-3 col-sm-3 col-sm-pull-4 " style="background-color: #4ec5bc">col-md-6 col-sm-3 col-sm-pull-4  </div>
        <div class="col-md-3 col-sm-3 col-sm-push-4 " style="background-color: #c51497">col-md-6 col-sm-3 col-sm-push-4 </div>
    </div>



    <div class="row pstyle" style="color: red;">
        <p class="text-left">Left aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-right">Right aligned text.</p>
        <p class="text-justify">Justified text.</p>
        <p class="text-nowrap">No wrap text.</p>
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </blockquote>
    </div>

</div>
</body>
</html>